<template>
  <view class="container">
    <view class="search-box">
      <view class="searchInput">
        <input type="text" placeholder="  请输入正确的用户名" v-model="searchContent" />
        <view class="click" @click="getSearch1">搜索</view>
      </view>
      <view class="searchbtn" @click="getSearch2">全部订单</view>
    </view>
    <view class="body">
      <ul class="orderList" v-for="(item, index) in orders" :key="item.Order_ID"
        @click="gotoOrderDetail(item.Order_ID)">
        <li class="order">订单ID:{{item.Order_ID}}</li>
        <li class="order">汽车车标：{{item.Order_Car}}</li>
        <li class="order">价格：￥{{item.Goods_Price}}</li>
        <li class="order">是否付款（已支付/未支付）：{{item.Order_Pay}}</li>
        <li class="order">订单时间：{{item.Order_Date}}</li>
      </ul>
    </view>
  </view>
</template>

<script>
  import store from '@/store/index.js' //需要引入store
  export default {

    data() {
      return {
        orders: [],
        timer: null,
        kw: '',
        inputs: '',
        searchResults: [],
      }
    },
    onLoad() {
      this.orders = this.orderList()
    },

    methods: {
      // 进入订单详情页
      gotoOrderDetail(Order_ID) {
        // 存储单个订单数据到state中，点击哪个订单存哪个
        this.selectedOrder = this.orders.find(item => item.Order_ID === Order_ID)
        store.commit('updateOrders', this.selectedOrder)
        console.log('orders::', store.state.orders)
        uni.navigateTo({ url: `/subpkg/orderDetail/orderDetail?${Order_ID}`, })
      },
      // input(inputs) {
      //   if (inputs == 'orders.Order_ID') {
      //     return this.orders
      //   }
      // },
      getSearch1() {
        if (this.searchContent === '') {
          this.orders = this.orderList()
        } else {
          this.getOrderList(this.earchContent)
        }
      },
      getSearch2() {
        this.orders = this.orderList()
      },
      // 获取后端 根据用户名获取订单数据
      async getOrderList() {
        console.log(this.searchContent)
        const { data: res } = await uni.request({
          url: 'http://127.0.0.1:3007/api/userOrderList',
          method: 'POST',
          data: {
            name: this.searchContent
            //orderNum: 1
          },
          header: { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' }
        })
        console.log(res.data)
        this.orders = []

        // var arr = []; //定义数组
        for (var i in res.data) {
          this.orders.push(res.data[i])
        }
        console.log('this.orders' + this.orders)
      },
      async orderList() {
        const { data: res } = await uni.request({
          url: 'http://127.0.0.1:3007/api/businOrderList',
          method: 'GET',
          header: { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' }
        })
        console.log(res.data)
        this.orders = []
        for (var i in res.data) {
          this.orders.push(res.data[i])
        }
        console.log('this.orders:', this.orders)
      },
    },
  }
</script>

<style lang="scss">
  .container {
    background-color: rgb(234, 231, 224);
    height: 500px;
  }

  .search-box {
    position: static;
    searchContent: 0;
  }

  .orderList {
    height: 115px;
    width: 96.5%;
    border: 1px solid black;
    border-radius: 8px;
    background-color: #fffae8;
    margin-searchContent: 5px;
    margin-left: 2px;
    margin-top: 4px;
    padding-left: 5px;
    padding-top: 7px;
  }

  .searchInput {
    border: 1px solid black;
    border-radius: 10px;
    width: 98%;
    height: 30px;
    background-color: white;
    margin-searchContent: 2px;
    margin-left: 2px;
    display: flex;
    top: 2px;
  }

  .searchbtn {
    background-color: orange;
    height: 30px;
    text-align: center;
    margin-top: 2px;
    border: 1px solid black;
    border-radius: 10px;
    width: 98%;
    margin-left: 2px;
  }

  .click {
    right: 0.5px;
    width: 50px;
    border: 1px solid white;
    border-radius: 10px;
    height: 28px;
    background-color: orange;
    text-align: center;
    margin-left: 100px;
  }
</style>